¡ Feliz 2.009 !

Seguramente esta clase de páginas no te llamen la atención, pero para los diseñadores de plantillas resulta de gran utilidad.
Se llama Tartan Maker y es un generador de imágenes todas ellas a cuadritos tipo textil.
Podemos añadir hasta 10 colores diferentes y escoger la imagen en diagonal o horizontal, así como visualizar el efecto a pantalla completa y descargar la imagen en formato .png
¿Más cosas? dispone de una galería donde ver las imágenes que otras visitas fueron creando con enlace a sus páginas para ver el resultado.

Los iconos forman parte de cualquier plantilla, suelen ser enlaces directos o para ofrecer una información ampliada.
Free icons es sitio obligado si te gusta que a tu blog no le falte ni un detalle, encontraremos una bonita galería de iconos que aportarán un toque alegre y diferente.

En Yanku-template no hay un gran surtido de plantillas pero son lindas y de libre descarga.

Hay plantillas a las que añadir un menú transforma completamente la estética, les resta protagonismo a la cabecera o simplemente no encontramos un menú discreto y acorde con la plantilla. pero no por ello tenemos que prescindir de un menú.

En estos casos bastaría con añadir un menú tipo texto y ubicarlo en la cabecera de nuestro blog.

Nos situamos en la plantilla sin expandir y buscamos:

<div id='header-wrapper'>
_ _ _ _más código de widget_ _ _ _
</div>

Justo después añadimos un bloque conteniendo un div para albergar el menú.

<div style='position:relative;left:590px;bottom:80px;'>
<a href='url-de-la-página'>Home</a> | <a href='url-de-la-página'> Posts RSS</a> | <a href='url-de-la-página'>Comments RSS |</a>
</div>



A ese bloque le estamos añadiendo la ubicación.
position:relative;left:590px; (podemos aumentar o disminuir para ubicarlo a izquierda o derecha)

bottom:80px; (le otorgamos la altura)

Añadí Home para ir a inicio, Posts RSS para suscribirse a los post y Comments RSS para suscribirse a los comentarios pero podría ser cualquier otro enlace.

Perfil, contacto, una entrada especifica del blog o enlaces externos.

En el blog de J.Miur me entero de una noticia que me deja perpleja como seguramente te vas a quedar cuando la leas.
Se trata de la transcripción de un mail recibido y queda corroborado por la nota que aparece en la web que es la siguiente.

¡Hola!

Somos un grupo de 3 estudiantes bahienses de la Universidad Nacional del Sur: Nicolás Álvarez, Ricardo Matías Ferro Moreno y Nicolás Komañski. En abril del año que viene (2009), junto con nuestro coach Martín Darío Safe, nos vamos a Estocolmo, Suecia .

¿Cómo?

El 15 de Noviembre de este año participamos en la Instancia Regional de la competencia ACM ICPC (International Collegiate Programming Contest) y salimos 3ros de la Región Sur de Sudamérica (4tos en toda Sudamérica). Con esto, clasificamos para la instancia mundial.

Pueden ver acá los resultados de la competencia para la región Sudamérica Sur. Nosotros somos el equipo “Bahía”.

Esta competencia consiste en resolver problemas de tipo algorítmicos-matemáticos. Cada grupo de 3 participantes cuenta con una computadora y 5 horas para resolver una cantidad de problemas que varía entre 8 y 11.

Para más información sobre la competencia, dejo un par de links:

• Información general (castellano)
• Página oficial de la competencia (inglés)
• Resultados todo Sudamérica
• ICPC en la Wiki (castellano)
• ICPC en la Wiki (inglés)
• Equipos clasificados para la instancia Mundial

¿Por qué estamos contando todo esto?

No creamos este blog para molestar a la gente con nuestra historia por el simple motivo de querer contarla. El problema es que, al ser invitados a la instancia Mundial, la organización de la competencia nos paga todos los gastos relacionados con la estadía en Estocolmo, pero no nos cubre los pasajes.

El costo de los pasajes es aproximadamente 6000 USD (dólares).

Creamos este blog con el objetivo de difundir nuestra situación, para poder darnos a conocer y ver si eso ayuda a conseguir alguna empresa, institución, etc, que nos auspicie.

A medida que vaya progresando nuestra campaña, iremos posteando lo que va pasando.

Agradecemos a todos la ayuda recibida. Con solo entrar al blog, ya nos están ayudando.


Nicolás Álvarez, Ricardo Ferro Moreno, Nicolás Komañski y Martín Safe

Hablar de las obligaciones de los estados como dice J.Miur es algo inútil, sin embargo yo me veo en la obligación moral de divulgar esta noticia, quizás con eso y unos click cada día desaparezca el sentimiento de impotencia, esa sensación de querer y no poder que algunos no deben conocer.

Han creado un blog donde añadieron publicidad de Adsense y sólo piden un click para recaudar fondos y costearse con ello los pasajes.
Con la cantidad de click que hacemos a lo largo del día ¿se los vamos a negar a ellos?

Aquí puedes ayudarles. ¡Un click para Suecia!

Vimeo es un sitio que permite alojar y compartir vídeos en internet y posee una sencilla y cuidada imagen que estéticamente se adapta bien cualquier página web.
Al contrario de YouTube que permite añadir marcos de diferentes colores Vimeo no añade marcos quizás por eso me ha gustado tanto porque la interfaz se muestra amplia y da la sensación que toda la atención la atrae el vídeo.
Otro detalle importante de Vimeo es que no transforma los vídeos a flash sino que respeta su formato original y el tiempo de carga es muy inferior a otros servidos de vídeo.
Dispone de un espacio de ayuda y diferentes vídeos a modo de tutorial sustituyendo con ello una carencia muy importante y es la posibilidad de traducir la página en otros idiomas.
Podemos subir vídeos de 500MB semanales, con una resolución de hasta 1280x720 en formatos asf, asx, avi, divx, dv, dvx, m4v, mov, mp4, mpeg, mpg, qt, wmv, 3g2, 3gp, 3ivx and 3vx. Creo que vale la pena probarlo.

Aquí una muestra de un vídeo creado por Matthew

Si hacemos click donde indica la flecha los podemos ver a pantalla completa y comprobar la calidad de imagen.

Lo siento, lo siento si soy cansina con los temas navideños pero es que este vídeo lo vi precioso....

La primera vez que vi esta nube en WordPress pensé que el efecto era muy lindo y también que era una pena no poder añadirla a Blogger.
Poco después vi las primeras explicaciones de J.Miur en Vagabundia sobre Cumulus, un plugin para WordPress que genera un archivo Flash y permite crear esta atractiva nube de etiquetas.
Rosa también explicaba como hacerlo siguiendo las explicaciones de Blogger Buster donde se le llama a la nube Blogumus.
Le siguió Olomán y seguramente muchos más. Es por eso que no la había dado a conocer pensando que localizar las instrucciones no tenía pérdida ya que eran muchos los caminos para encontrarla, pero parece que después de un tiempo aún despierta interés así que ahí va.

Las explicaciones las extraje del blog de Rosa, me pareció muy rápida y sencilla la forma de crear la nube y la tengo añadida a mi blog de amigos desde hace tiempo.

Nos situamos en plantilla Edición de HTML, marcamos para expandir la plantilla y buscamos lo siguiente:

<b:section class='sidebar' id='sidebar' preferred='yes'>

En lugar de esa línea podría ser que tuviéramos esta:

<b:section class='sidebar' id='sidebar' showaddelement='yes'>

A continuación añadimos el siguiente código[+]

<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Para adaptarla a los colores del blog modificaremos lo siguiente :
En color azul ancho de la nube y rojo el alto
En verde el color de fondo
Color de texto en naranja
Tamaño de fuente color rosa

El otro día en conversación con k_nelita me decía que la mayoría de bloggers no se suscriben a los comentarios, los motivos pueden ser varios y como ella piensa el desconocimiento de como hacerlo o para qué sirve es uno de ellos.
Lleva mucha razón, con frecuencia leo comentarios donde después de hacer una consulta sugieren que se les responda en su mail eso quiere decir que desconocen que con un simple click en "Suscripción por correo electrónico" reciben en su correo las actualizaciones de comentarios en esa entrada que se suscribieron.
Llevar un seguimiento de comentarios es interesante primero por comodidad de no tener que buscar la respuesta y segundo porque en los comentarios podemos encontrar respuesta a nuestras dudas.

Más conversaciones y esta vez con J.Miur sobre el problema que desde hace unos días estamos teniendo con el feed de Blogger.
El script de últimos comentarios ha dejado de funcionar y según me cuenta J.Miur ni scripts ni widgets tiene nada que ver sino como decía los feed de Blogger cuya cantidad máxima a leer es de 5.000
No quiere decir esto que no se pueda comentar, podemos seguir haciéndolo como tenemos costumbre. Lo que no veremos será el script de la sidebar actualizado hasta que lo solucionen, bien dando un margen mayor de comentarios o dejando las cosas como estaban antes de la metedura de pata los problemas.

Todo esto confirma todavía más la importancia de suscribirse a los comentarios porque somos muchos los que tenemos costumbre de acceder a un blog y mirar en la sidebar por si nos hubieran contestado o simplemente por si el hilo de algún comentario nos interesa.

Esperemos que lo solucionen pronto, sólo esperemos...

Visto en Fondos Copados

Templates Cove es un lugar donde de forma gratuita podemos descargar plantillas.
Su autora es Gimbola una italiana de gusto exquisito que muestra elegancia en cada uno de sus diseños.

Muchas veces nos complicamos la vida sin necesidad me refiero en el tema blog claro está, aunque en el tema personal también ocurre pero eso es otra historia.
No sé la cantidad de formas que hay para expandir y recoger texto, códigos o cualquier contenido, lo cierto que es el tema que más consultas recibe este blog y también que al añadirlo a las plantillas adaptadas los problemas se multiplican.

Hay un script que proporciona J.Miur y me parece la forma más sencilla de ocultar un contenido sin necesidad de hacer grandes cambios en la plantilla. Únicamente es necesario añadir un script justo antes de </head>

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;

if(c.style.display=='none') {
c.style.display='block';
} else {

c.style.display='none';
}
return false;
}
</script>

Una vez añadido sólo queda ubicarse en el sitio que vamos a ocultar post, sidebar o cualquier parte, para añadir lo siguiente:

Aquí escribimos el texto visible....
<a onclick="return verocultar(this);"href="javascript:void(0);">[+/-]</a>
<div style="display: none;">Contenido oculto</div>

En contenido oculto podemos incluir cualquier cosa.

Vídeos [+/-]

Imágenes[+/-]

Texto [+/-]

Maecenas pretium, neque vel sodales dapibus, mi lorem congue lorem, quis euismod justo nisi id ipsum. Proin sapien. Aenean sed magna ac ligula tincidunt aliquet. Vestibulum ipsum tellus, ornare sed, cursus nec, luctus at, risus. Aenean vulputate, ligula sed tincidunt pretium, nisi magna ultrices orci, et dapibus leo lectus vel risus. Mauris vulputate scelerisque sem. Quisque quam nibh, malesuada eu, rutrum in, rhoncus id, dolor.

Código[+/-]

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;

if(c.style.display=='none') {
c.style.display='block';
} else {

c.style.display='none';
}
return false;
}
</script>

Podemos sustituir el símbolo de expandir recoger por una imagen, lo que haríamos sería añadir <img src="url-de-la-imagen"/> en lugar de [+/-]

Pellentesque pulvinar, tortor viverra facilisis faucibus, augue risus tempus ipsum, vel interdum ante pede nec nisl.

Mauris vitae massa id lorem blandit tempor. Nam lacinia mi eu neque. Donec porttitor feugiat felis. Sed placerat facilisis turpis. Vivamus tempus urna sit amet sapien. In lacinia vulputate lorem.

El efecto sombra ha sido uno de mis favoritos, suelo aplicarlos a las imágenes pero esta vez se trata de añadir el efecto sombra a las entradas y en su interior podemos añadir cualquier contenido.
Este efecto se crea con tres cajas, y las sombras se añaden con la clase "blur" y "shadow" para el ejemplo se va a añadir las sombras en color gris pero si utilizáis un color de fondo para el blog es recomendable que la sombra sea del mismo color pero en tono más oscuro.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.blur{
background-color: #ccc; /*color de sombra 1ª*/
color: inherit;
margin-left: 4px; /*borde izquierdo*/
margin-top: 4px; /*borde superior*/
}

.shadow,
.content{
position: relative;
bottom: 2px;/*borde inferior*/
right: 2px; /*borde derecho*/
}
.shadow{
background-color: #666; /*color de sombra 2ª*/
color: inherit;
}
.content{
background-color: #fff; /*color de fondo de la caja*/
color: #000; /*color de texto*/
border: 1px solid #000; /*borde de la caja*/
padding: .5em 2ex;
}

Guardamos los cambios y nos dirigimos al editor de entradas donde añadiremos lo siguiente:

<div class="blur">
<div class="shadow">
<div class="content">aquí el contenido de la caja</div>
</div>
</div>

En nuestro blog veríamos algo así:

Podemos cambiar el color de borde y de las dos sombra, color de fondo, de texto y añadir una imagen de fondo en .content sustituyendo donde dice background-color: #fff; por background:url('aquí la url de tu imagen de fondo');

Visto en Desarrolloweb

Copia esto y pégalo en la CSS, guarda los cambios y luego marca cualquier texto del blog.

Así me lo pide Pizcos y así hago, copio lo siguiente:

::-moz-selection { background: #A8141B; color: white; /* Firefox */ }

Lo añado antes de ]]></b:skin> guardo los cambios y pruebo a marcar cualquier texto del blog.

Y me encanta ese efecto que resalta al copiar. Si aún utilizas Explorer lo siento por ti porque no podrás verlo, pero te dejo una captura que veas lo que te pierdes y tengas un motivo más de cambiar a Firefox.

Sin embargo si utilizas Firefox, Safari, Chrome y Opera ya es otra historia.

::-moz-selection { background: #A8141B; color: white; /* Firefox */ }
::-moz-selection { background: #A8141B; color: white; /* Chrome */ }
::-moz-selection { background: #A8141B; color: white; /* Opera */ }
::selection { background: #A8141B; color: white; /* Safari */ }

Gracias Pizcos

Visto en: Norad

Una de las preguntas de estos días es sobre blockquotes lo que conocemos por comillas y que normalmente utilizamos para resaltar texto, se pueden utilizar imágenes o unas simples líneas a modo de bordes el resultado de cualquiera de ellos es muy atractivo.
En su día explicaba una forma muy sencilla de añadir blockquotes, con css también podemos conseguir que aparezcan en nuestro texto y añadirle unos estilos. Esa es la parte divertida.
En nuestra plantilla encontraremos algo así:

.post blockquote {
margin:1em 20px;
}

Podemos añadir unas líneas para conseguir otros efectos:

.post blockquote {
color:#333;
width:350px;
margin-top: 10px;
font-size:100%;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 4px double #5C6625;
font: normal helvetica, sans-serif;
}

.post blockquote {
width:350px;
color: #000;
padding: 8px;
font-size:100%;
margin: 10px 0 10px 0px;
text-align: justify;
border-top: 3px dotted #6B2533;
border-bottom: 3px dotted #6B2533;
background: transparent;
font:normal helvetica, sans-serif;
}

.post blockquote {
color: #666666;
margin-left: 20px;
display: block;
margin-right: 20px;
font-size: 90%;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 140%;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 40px;
}

.post blockquote {
color:#fff;
width:350px;
margin-top: 10px;
font-size:100%;
padding-left: 18px;
padding-right: 18px;
padding-top: 18px;
padding-bottom: 18px;
background-image:url(url-imagen-fondo);
font: normal helvetica, sans-serif;
}

.post blockquote {
color: #0f5718;
font-size: 90%;
display: block;
margin-right: 20px;
line-height: 140%;
margin-left: 20px;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 70px;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
}

Más sobre Blockquotes aquí y aquí.

Visto en: Hdwallpapers